<template>
  <div class="cms-views-container play-number-pages">
    <!-- 视频 -->
    <CmsVideoView />
    <!-- 视频名称 -->
    <CmsVideoName />
    <!-- 评分 -->
    <CmsScoreView
      :type="1"
      class="px-4 mb-2"
      @click="handleClick('filmRating')"
      :class="{ 'component-selected': select === 'filmRating' }"
    />

    <!-- 播放次数 -->
    <CmsVideoNumber
      @click="handleClick('playCount')"
      :class="{ 'component-selected': select === 'playCount' }"
      showPlayNumber
    />

    <!-- 视频标签 -->
    <CmsVideoLabel />

    <!-- 演员列表 -->
    <CmsActorList />

    <!-- 影片简介 -->
    <CmsPlayerVideoIntroduction />
  </div>
</template>

<script setup lang="ts">
import type { ComponentKeys } from '@cms/h5-editor'
import CmsComponents from '@cms/components'
const {
  CmsScoreView,
  CmsVideoView,
  CmsVideoName,
  CmsVideoNumber,
  CmsVideoLabel,
  CmsActorList,
  CmsPlayerVideoIntroduction
} = CmsComponents

withDefaults(defineProps<{ type?: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.play-number-pages {
  .play-header-box {
    background: linear-gradient(to bottom, #def4ff, #ffffff);
  }
  .actor-box {
    border-bottom: 1px solid #f1f3f7;
  }
}
</style>
